/**
 * Created by Administrator on 2017/3/21.
 */
import React, { Component,Fragment } from 'react';
import {
  Form,
  Button,
  Badge,
  Select,
  DatePicker,
  Radio,
  Descriptions,
  Input,
  Typography,
  Icon,
  Upload,
  Modal, Col,
} from 'antd';
import request from '@/utils/request';
import { connect } from 'dva';
import moment from 'moment';
import FullCalendar from '@fullcalendar/react';
import dayGridPlugin from '@fullcalendar/daygrid';
import timeGridPlugin from '@fullcalendar/timegrid';
import interactionPlugin, { Draggable } from '@fullcalendar/interaction';
import '@fullcalendar/core/main.css';
import '@fullcalendar/daygrid/main.css';
import '@fullcalendar/timegrid/main.css';
import BuildModalTitle from '@/components/BuildModalTitle';

import { afterCloseModal, leaveStatue,leaveStatueImg } from '@/utils/utils';
import config from '@/config/config';
import ZImg from 'react-zmage';
import AddOrEditReserve2 from '../CarInfo/addOrEditReserve2';
const { confirm } = Modal;
const { Paragraph } = Typography;
const { TextArea } = Input;
const { Option } = Select;

const ButtonGroup = Button.Group;

class AddPoliciesForm extends Component {
  constructor(props) {
    super(props);
    this.state = {
      fileList: [],
      all_users: [],
      format: 'YYYY-MM-DD',
    };
    this.myRef = React.createRef();
  }

  render() {
    const { getFieldDecorator } = this.props.form;
    const editRecord = this.props.editRecord;

    const that=this
    return (
      <div>
        <Form>
          {leaveStatueImg(this.props.editRecord.status)}
          <Descriptions  column={3}   className={'blue-descriptions'} title={<div style={{textAlign:'center'}}>车辆详情</div>} bordered>

            <Descriptions.Item label="车辆图片"  span={2}>
              <ZImg style={{height:'60px'}} src={this.props.editRecord.car.image_path}/>
            </Descriptions.Item>
            <Descriptions.Item label="车辆所属部门"  span={2}>
              {this.props.editRecord.car.department_name}
            </Descriptions.Item>
            <Descriptions.Item label="司机"  span={2}>
              {this.props.editRecord.car.driver}
            </Descriptions.Item>
            <Descriptions.Item label="车牌号"  span={2}>
              {this.props.editRecord.car.license_plate_number}
            </Descriptions.Item>
            <Descriptions.Item label="车辆编号"  span={2}>
              {this.props.editRecord.car.number}
            </Descriptions.Item>
            <Descriptions.Item label="品牌"  span={2}>
              {this.props.editRecord.car.brand}
            </Descriptions.Item>
            <Descriptions.Item label="车辆类型"  span={2}>
              {this.props.editRecord.car.type}
            </Descriptions.Item>
            <Descriptions.Item label="乘坐人数"  span={2}>
              {this.props.editRecord.car.passenger_count}
            </Descriptions.Item>
          </Descriptions>

          <Descriptions className={'blue-descriptions'} title={<div style={{ textAlign: 'center',marginTop:'10px' }}>
            申请详情</div>}
                        bordered>
            <Descriptions.Item label="申请人">
              {this.props.editRecord.user.name}
            </Descriptions.Item>
            <Descriptions.Item label="开始时间">
              {this.props.editRecord.start_time}<Icon style={{marginLeft:"10px",color:'blue',cursor:"pointer"}}
                                                      onClick={()=>{
                                                        this.setState({modal:true})
                                                        setTimeout(function() {
                                                          console.log(that.myRef.current.calendar.getDate())
                                                          that.myRef.current.calendar.gotoDate(moment(
                                                            that.props.editRecord.start_time).format('YYYY-MM-DD'))
                                                        },500)
                                                      }} type="calendar" />
            </Descriptions.Item>
            <Descriptions.Item label="结束时间">
              {this.props.editRecord.end_time}<Icon style={{marginLeft:"10px",color:'blue',cursor:"pointer"}}
                                                    onClick={()=>{
                                                      this.setState({modal:true})
                                                      setTimeout(function() {
                                                        console.log(that.myRef.current.calendar.getDate())
                                                        that.myRef.current.calendar.gotoDate(moment(
                                                          that.props.editRecord.start_time).format('YYYY-MM-DD'))
                                                      },500)
                                                    }} type="calendar" />
            </Descriptions.Item>
            <Descriptions.Item label="提交时间" span={3} >
              {this.props.editRecord.submit_time}
            </Descriptions.Item>
            <Descriptions.Item label="申请事由" span={3} style={{ whiteSpace: 'wrap' }}>
              <Paragraph style={{ fontWeight: 'bold', color: '#000' }} ellipsis={{ rows: 3, expandable: true }}>
                {this.props.editRecord.cause}
              </Paragraph>
            </Descriptions.Item>
            <Descriptions.Item label="状态" span={3}>
              {leaveStatue(this.props.editRecord.status)}
            </Descriptions.Item>
            {
              this.props.editRecord.reviewers.map((item,index)=>{
                let statusColor1=''
                let statucText=''
                if(item.status===2){
                  statusColor1='#006af0'
                }else if(item.status===3){
                  statusColor1='#ff0006'
                  statucText=' 不通过'
                }else if(item.status===4){
                  statusColor1='#1e9680'
                  statucText=' 通过'
                }
                return <Fragment key={index}>
                  <Descriptions.Item label="审批人" span={1}>
                    <div style={{color:statusColor1}}>  {item.name}</div>
                  </Descriptions.Item>
                  <Descriptions.Item label="审批时间" span={1}>
                    <div style={{color:statusColor1}}>  {item.operating_time + statucText}</div>
                  </Descriptions.Item>
                  <Descriptions.Item label="备注" span={3}>
                    <div style={{color:statusColor1}}>  {item.remark}</div>
                  </Descriptions.Item>
                </Fragment>
              })
            }
            {
              this.props.editRecord.replicators.map((item,index)=>{
                let statusColor1=''
                return <Fragment key={index}>
                  <Descriptions.Item label="抄送人" span={1}>
                    <div style={{color:statusColor1}}>  {item.name}</div>
                  </Descriptions.Item>
                  <Descriptions.Item label="确认时间" span={2}>
                    <div style={{color:statusColor1}}>  {item.operating_time?item.operating_time+' 已读':''}</div>
                  </Descriptions.Item>
                </Fragment>
              })
            }
          </Descriptions>
          {
            (this.props.type === 'car_applications' &&this.props.editRecord.status === 2 &&
              this.props.editRecord.reviewers.map((item,index)=>{
                return item.name
              }).indexOf(sessionStorage.getItem('username'))>=0)&&
            <Fragment>
              <Descriptions className={'blue-descriptions'} style={{marginTop:'10px'}} title={<div style={{ textAlign: 'center' }}>车辆审批</div>} bordered>

                <Descriptions.Item label="审批备注" span={3}>
                  {getFieldDecorator('review_remark', {
                    initialValue: this.props.editRecord ? this.props.editRecord.review_remark : '',
                  })(
                    <TextArea rows={2}/>,
                  )}

                </Descriptions.Item>
                <Descriptions.Item label="审批操作" span={3}>
                  {getFieldDecorator('status', {
                    initialValue: 4,
                  })(
                    <Radio.Group>
                      <Radio value={4}>通过审批</Radio>
                      <Radio value={3}>不通过审批</Radio>
                    </Radio.Group>,
                  )}
                  <Button type={'primary'} size={'small'} onClick={() => {
                    const that = this;
                    const formValues = this.props.form.getFieldsValue();
                    confirm({
                      title: `确定要${formValues.status === 4 ? '通过' : '不通过'}审批吗?`,
                      content: '请谨慎操作',
                      okText: '确定',
                      cancelText: '取消',
                      centered: true,
                      maskClosable: true,
                      onOk() {
                        request(`/car_applications/${editRecord.id}/review`, {
                          method: 'PUT',
                          params: {
                            ...formValues,
                          },
                        }).then((response) => {
                          if (response.status === 200) {
                            that.props.save();
                          }
                        });
                      },
                      onCancel() {
                        console.log('Cancel');
                      },
                    });
                  }}>确定</Button>
                </Descriptions.Item>
              </Descriptions>
            </Fragment>
          }
        </Form>
        <Modal
          title={<BuildModalTitle visible={this.state.modal} modalClass="modal"
                                  title={`时间范围`}/>}
          destroyOnClose
          visible={this.state.modal}
          centered
          onOk={this.handleReserve}
          className="modal"
          width={1000}
          afterClose={() => {
            afterCloseModal(); // destroyOnClose需要
          }}
          footer={null}
          onCancel={() => {
            this.setState({ modal: false, editRecord: {} });
          }}

        >
          <FullCalendar
            ref={this.myRef}
            loading={(isLoading)=>{
              console.log('isLoading',isLoading)
            }}
            defaultView="dayGridMonth"
            plugins={[dayGridPlugin, timeGridPlugin, interactionPlugin]}
            header={{
              left: 'prev,next, today', // 上一年，上一月，下一月，下一年 今天
              center: 'title', // 当前年月
              right: 'dayGridMonth,timeGridWeek,timeGridDay', // 月 周 天
            }}
            locale='zh-cn'
            contentHeight={630}
            buttonText={{
              today: '今天',
              month: '月',
              week: '周',
              day: '天',
            }}
            allDayText='全天'
            firstDay={1}
            slotDuration={'01:00:00'}
            timeFormat={'HH:00:00'}
            slotLabelFormat={{
              hour: '2-digit',
              minute: '2-digit',
              meridiem: false,
              hour12: false,
            }}
            nowIndicator={true}
            eventOverlap={false}
            eventClassNames={['myclassname', 'otherclassname']}
            eventSources={[[{
              title:'本次预定',
              backgroundColor : '#0085ff',
              start:this.props.editRecord.start_time,
              end: this.props.editRecord.end_time,
            }]]}
            eventLimit={2}
            eventTimeFormat={
              {
                hour: '2-digit',
                minute: '2-digit',
                meridiem: false,
                hour12: false,
              }
            }
          />

        </Modal>
      </div>
    );
  }
}

const AddPoliciesFormWrap = Form.create()(AddPoliciesForm);
export default connect()(AddPoliciesFormWrap);
